/**
 * 插件形式封装全局指令
 * 为了操作DOM
 */

import { useIntersectionObserver } from '@vueuse/core'

// 加载失败的图片
import defImg from '@/assets/images/200.png'
// 默认加载图片
import loadImg from '@/assets/images/load.gif'

// 图片懒加载
export default {
  install (app) {
    app.config.globalProperties.load = loadImg// vue3没有原型链

    app.directive('ilazy', {
      /**
         *
         * @param {*} el 被自定义指令绑定的元素
         * @param {*} binding 获取指令上绑定的值
      */
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(
          el, // 要监控的组件
          // [{ isIntersecting }]
          // 数组解构，解构时命名为null会报错，
          // 为空，为undefined就可以可以
          ([{ isIntersecting }]) => {
          // isIntersecting:组件或者元素是否进入可视区--返回true或者false
          // console.log(isIntersecting)

            // 解决根据视口内容的变化一直监听，一直执行函数的问题
            // 进入视口之后，发送某请求，不再执行函数
            if (isIntersecting) {
              el.src = binding.value
              // 图片加载失败处理=>显示一个默认图片
              el.onerror = () => {
                el.src = defImg
              }
              stop()// 关闭监听
            }
          }
        )
      }
    })
  }
}

// 挂载全局属性

// app.config.globalProperties.load //vue3没有原型链
// vue.prototype.load //vue2有
